<template>
    <canvas ref="elCanvasCircular">Your browser does not support the HTML5 canvas tag.</canvas>
</template>

<script>
import canvasView from './ViewCanvas';

export default {
    name: 'viewCircular',
    extends: canvasView,
    methods: {
        drawCircular(x, y, r, start, end, color, type) {
            var el = this.$refs.elCanvasCircular;
            var ctx = el.getContext('2d');
            var unit = Math.PI / 180;
            ctx.beginPath();
            ctx.arc(x, y, r, start * unit, end * unit);
            ctx[type + 'Style'] = color;
            ctx.closePath();
            ctx[type]();
        },
        onResize() {
            var w = this.detail.style.position.w;
            var h = this.detail.style.position.h;
            var el = this.$refs.elCanvasCircular;
            el.width = w;
            el.height = h;
            var ctx = el.getContext('2d');
            ctx.clearRect(0, 0, w, h);
            var x = w / 2,
                y = h / 2,
                r = w / 2 > h / 2 ? h / 2 : w / 2;
            var color = this.getForeColor();
            this.drawCircular(x, y, r - 2, 0, 360, color, 'fill');
        },
        getForeColor() {
            return this.detail.style.foreColor;
        },
    },
    mounted() {
        this.onResize();
    },
};
</script>
